<template>
  <div class="produ-nav">
    <el-row>
      <el-col
        v-show="item.bIsShow"
        :key="index"
        v-for="(item, index) in navList"
        style="width: auto"
      >
        <div
          class="nav-item tab-over"
          :class="navType == item.type ? 'is-active' : ''"
          @click.stop="click2Nav($event, item.type)"
        >
          <el-badge :value="item.num" class="nav-item-num" type="primary">
            {{ item.text }}
          </el-badge>
        </div>
      </el-col>

      <el-col :span="4" style="float: right; min-width: 200px">
        <el-input
          size="small"
          style="line-height: 54px; padding-right: 73px"
          placeholder="请输入关键词↵"
          v-model="searchKey"
          @change="search4ProduByKey"
        >
          <template #prefix>
            <el-icon class="el-input__icon"><search /></el-icon>
          </template>
        </el-input>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navType: 0,
      // navList: [  // DEMO
      //   {
      //     index: 1,
      //     type: 0,
      //     span: 3,
      //     text: '全部',
      //     num: 6
      //   }
      // ]
      searchKey: "",
    };
  },
  props: {
    navList: Array,
  },
  methods: {
    click2Nav(el, type) {
      this.navType = type;
      this.$emit("navClick", type);
    },
    search4ProduByKey() {
      this.$emit("search", this.searchKey);
    },
  },
};
</script>

<style lang="scss">
/***********my-produ-nav************/
.produ-nav {
  border-bottom: 1px solid #edeff2;

  .nav-item {
    padding: 8px 13px 0 13px;
    line-height: 44px;
    margin: 0 17px;
    min-width: 70px;

    font-size: 14px;
    color: #43475c;
    text-align: center;
    border-bottom: 2px solid transparent;
    cursor: pointer;

    .nav-item-num {
      .el-badge__content {
        top: 10px !important;
        right: 5px !important;
        background: rgba(64, 158, 255, 0.7);
      }
    }
  }

  .is-active {
    color: #127bff;
    border-bottom: 2px solid #127bff;
  }
}
</style>
